<template>
	<view class="content align-center">
		<image class="applogo" src="@/static/applogo.png"></image>
		<text class="appname">GSS顾客小程序</text>
		<view class="login-card">
			<view class="input-row flexr">
				<input class="input" placeholder="请输入手机号"/>
			</view>
			<view class="divider"/>
			<view class="input-row flexr">
				<input class="input" placeholder="请输入手机验证码"/>
				<view class="get-code flexr align-center justify-center"
					:class="{'disable': seconds > 0}"
					@click="getCode">
					{{ seconds>0 ? `${seconds}s` : '获取验证码' }}
				</view>
			</view>
		</view>
		<view class="primary-button">
			登录
		</view>
		
		<view class="login-privacy-container flexc">
			<view class="flexr align-center justify-center">
				<radio></radio>
				<view>
					<text>我已阅读并同意</text>
					<text class="link">《服务条款》</text>
					<text>和</text>
					<text class="link">《隐私条款》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const seconds = ref(0);
let secondsInterval = null;

async function getCode() {
	console.log('get code')
	seconds.value = 60
	clearInterval(secondsInterval);
	secondsInterval = setInterval(() => {
		seconds.value = seconds.value - 1;
		if (seconds.value <= 0) {
			clearInterval(secondsInterval);
		}
	}, 1000);
}
</script>

<style lang="scss">
.content {
	padding: 32rpx;
	.applogo {
		width: 200rpx;
		height: 200rpx;
		margin-top: 30rpx;
	}
	.appname {
		font-size: 40rpx;
		margin-top: 25rpx;
	}
	.login-card {
		background-color: white;
		border-radius: 12rpx;
		margin-top: 60rpx;
		overflow: hidden;
		align-self: stretch;
		.input-row {
			height: 90rpx;
			position: relative;
			.input {
				width: 100%;
				padding: 0 20rpx;
				height: 100%;
			}
			.get-code {
				position: absolute;
				right: 20rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				height: 50rpx;
				width: 170rpx;
				color: $primary-color;
				border: 1px solid $primary-color;
				border-radius: 25rpx;
				font-size: 25rpx;
				z-index: 100;
				transition: opacity .3s;
				&.disable {
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
	}
	.primary-button {
		align-self: stretch;
		margin-top: 30rpx;
	}
	.login-privacy-container {
		padding-top: 20rpx;
		justify-content: flex-end;
		.link {
			color: $primary-color;
			padding: 10rpx 0;
		}
	}
}
</style>
